<template>
  <view>
    <form report-submit="true">
      <view class="apply-refund">
        <!-- <view class="goods-item u-flex u-row-between u-m-b-20 u-p-20 u-radius-10" v-for="(item, index) in orderInfo.orderInfoList" :key="index">
          <view class="goods-image">
            <image class="icon-img2 fl border-radius" src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/03/26/kuaijie_20250326092954A029.png" mode=""></image>
          </view>
          <view class="goods-info u-flex u-row-between u-flex-1">
            <view class="goods-name u-line-2">{{ item.storeName }}</view>
            <view class="goods-price">
              <text>￥{{ item.price }}</text>
              <text class="goods-quantity">x{{ item.cartNum }}</text>
            </view>
          </view>
        </view> -->

        <view class="refund-info u-radius-10">
          <view style="display: flex;align-items: center;justify-content: space-between;    padding: 10px 15px;">
            <view class="goods-image">
              <image class="icon-img2 fl border-radius"
                src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/03/26/kuaijie_20250326092954A029.png"
                mode=""></image>
            </view> {{ orderInfo.toBeUsedOrPayPo.storeOrder.storeName }}
          </view>
          <u-cell title="订单创建时间" :value="orderInfo.createTime" :is-link="false"></u-cell>
          <u-cell title="订单支付时间" :value="orderInfo.payTime" :is-link="false"></u-cell>
          <u-cell title="退货件数" :value="orderInfo.totalNum" :is-link="false"></u-cell>
          <u-cell title="退款金额" :value="'￥' + Number(orderInfo.payPrice).toFixed(2)" :is-link="false"></u-cell>
          <!-- <u-picker mode="selector" v-model="index" :range="RefundArray"
                        @change="bindPickerChange"></u-picker> -->

          <!-- <u-cell title="备注说明" :is-link="false" class="u-p-t-20 u-p-b-20">
            <u-input v-model="refund_reason_wap_explain" type="textarea" :placeholder="'填写备注信息，100字以内'" maxlength="100" placeholder-style="color:#bbb;"></u-input>
          </u-cell> -->

          <!-- <view class="upload-proof u-p-20">
                        <view class="proof-item u-p-r-20 u-m-b-20" v-for="(item, index) in refund_reason_wap_imgPath"
                            :key="index">
                            <u-image :src="getImg(item)" width="120" height="120" border-radius="10"></u-image>
                            <u-icon name="close" class="proof-remove" @click="DelPic(index)"></u-icon>
                        </view>
                        <view class="proof-upload u-flex u-row-center u-m-b-20"
                            v-if="refund_reason_wap_imgPath.length < 3" @click="uploadpic">
                            <u-icon name="plus" size="60"></u-icon>
                            <text class="proof-upload-text">上传凭证</text>
                        </view>
                    </view> -->

          <u-button v-if="orderInfo.status" style="margin-top: 40px;" type="primary" @click="subRefund" form-type="submit"
            class="refund-button u-m-t-30">申请退款</u-button>
        </view>
      </view>
    </form>
  </view>
</template>

<script>
import { orderRefundVerify, applyRefund, submitRequestRefund, submitRequestRefundKj, toBeUsedOrPay } from "../../../utils/api/local";

export default {
  components: {},
  data() {
    return {
      refund_reason_wap_img: [],
      refund_reason_wap_imgPath: [],
      orderInfo: {},
      RefundArray: [],
      index: 0,
      orderId: 0,
      isAuto: false, // 没有授权的不会自动授权
      isShowAuth: false, // 是否隐藏授权
      id: "",
    };
  },

  onLoad(options) {
    this.orderInfo = JSON.parse(decodeURIComponent(options.order));
    if (this.orderInfo.orderId == undefined || this.orderInfo.orderId == "") return uni.showToast({ title: "缺少订单id,无法退款", icon: "none" });
    this.orderId = this.orderInfo.orderId;
    this.id = this.orderInfo.id;
    this.getOrderInfo();
  },
  methods: {
    getOrderInfo() {
      let that = this;
      toBeUsedOrPay({
        orderId: this.orderId,
      }).then((res) => {
      })
    },

    subRefund() {
      let that = this;
      submitRequestRefundKj({
        id: that.id,
        refundReasonWapType: "33003008",
        refund_reason_wap_explain: "",
        text: "朋友/网上评价不好",
        uni: that.orderId,
      })
        .then((res) => {
          if (res.code == 200) {
            uni.showToast({
              title: "申请退款成功,等待审核",
              icon: "none",
            });
            setTimeout(() => {
              uni.reLaunch({
              url: '/pages_h5/myCenter/components/local_life_order'
            });
            }, 1000);
          }
        })
        .catch((err) => {
          return uni.showToast({
            title: err,
            icon: "none",
          });
        });
    },
    bindPickerChange(e) {
      this.$set(this, "index", e.detail.value);
    },
  },
};
</script>

<style scoped lang="scss">
.apply-refund {
  padding: 20rpx 30rpx 70rpx 30rpx;
}

.goods-item {
  background-color: #fff;
}

.goods-image {
  width: 20%;
}

.goods-info {
  width: 80%;
}

.goods-name {
  width: 70%;
}

.goods-quantity {
  width: 30%;
}

.refund-info {
  background-color: #fff;
  margin-top: 18rpx;
}

.refund-button {
  width: 100%;
  height: 86rpx;
}

.proof-item {
  position: relative;
}

.proof-remove {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
}

.proof-upload {
  border: 1rpx dashed #ddd;
  border-radius: 10rpx;
  height: 120rpx;
}

.proof-upload-text {
  position: absolute;
  bottom: 20rpx;
}

.icon-img2 {
  width: 100rpx;
  height: 100rpx;
}

.border-radius {
  border-radius: 10rpx;
}
</style>
